<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<script src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="index.css">
<style>
	
</style>
</head>

<body>
	<div class="container">
		
		<!--头部-->
		<div class="header">
			<iframe src="header.html" width="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" height="150px;"></iframe>		
		</div>
		
		<!-- 内容 -->
		<div class="main">
			
			<!-- 轮播图 -->
			<div class="swiper">
				<div class="list">
					<img src="images/1.png" alt="" title="1">
					<img src="images/2.png" alt="" title="2">
					<img src="images/5.jpg" alt="" title="3">
					<img src="images/6.jpg" alt="" title="4">
				</div>
				<!--圆点-->
				<div class="pointer">
					<!--index为索引-->
					<span index="1" class="on"></span>
					<span index="2"></span>
					<span index="3"></span>
					<span index="4"></span>
				</div>
				<!--左右图片的切换-->
				<div class="arrow left">&lt;</div>
				<div class="arrow right">&gt;</div>
			</div>
			
			<!-- 赛区与发布 -->
			<div class="division">
				<p class="div-bg"></p>
				<h1>赛区与发布</h1>
				<div class="divPicture">	
					<a href="#"><img src="images/赛区1.png" alt="" title="5"></a>
					<a href="#"><img src="images/赛区2.png" alt=""></a>
					<a href="#"><img src="images/赛区3.png" alt=""></a>
					<a href="#"><img src="images/发布.png" alt=""></a>
				</div>
				<a href="#" class="div-Info">更多赛区与发布信息</a>
			</div>
			
			<!-- 场馆巡礼 -->
			<div class="showInfo">
				<p class="show-bg"></p>
				<h1>场馆巡礼</h1>
				<div class="img-border">
				<img src="images/巡礼图.jpg" >
				</div>
				<div class="div-icon">
					<img src="images/场馆.png" alt="" style="top:200px;left:870px">
					<img src="images/场馆.png" alt="" style="top:290px;left:1050px">
					<img src="images/场馆.png" alt="" style="top:400px;left:1100px">
				</div>
				<div class="div-content">
					<div class="content-icon">
						<img src="images/场馆.png" alt="" style="top:23px;left:25px;">
					</div>
					<div class="content-Info">
						<div style="display: none;">
							<p class="content-title">云顶滑雪公园</p>
							<img src="images/张家口赛区.jpg">
							<p class="content-main">云顶滑雪公园包括U型场地技巧、坡面障碍技巧、雪上技巧、空中技巧、障碍追逐、平行大回转六条赛道，共计产生20块金牌。张家口山地媒体中心位于场馆群内，由云顶大酒店改建而成。云顶滑雪公园不仅是自由式滑雪及单板滑雪国家队的训练基地，也为大众冰雪运动提供了优质场地。</p>
						</div>
						<div style="display: none;">
							<p class="content-title">国家高山滑雪中心</p>
							<img src="images/延庆赛区.jpg">
							<p class="content-main">高山滑雪被誉为“冬奥会皇冠上的明珠”。国家高山滑雪中心设7条雪道，雪道坡度大、落差大，建设难度极高，主要承担高山滑雪赛事。同时国家高山滑雪中心还包括山顶出发区、中间平台、竞技结束区、集散广场、索道等配套设施，最多同时容纳8000人观赛。</p>
						</div>
						<div>
							<p class="content-title">国家游泳中心</p>
							<img src="images/北京赛区.jpg">
							<p class="content-main">“双奥场馆”国家游泳中心在2019年首次通过“水冰转换”制出4条冬奥标准的冰壶赛道。“水冰转换”让国家游泳中心可以在“水上功能”和“冰上功能“之间自由切换，可以同时具备开展水上运动、冰上运动，及各类大型活动的能力。场馆泳池正常向公众开放。</p>
						</div>
					</div>
				</div>
			</div>

		</div>
			
		<!-- 底部 -->
		<div class="footer">


		</div>
		
	</div>
	<script>
		var index=1;/*索引变量*/
		var imageCount=4;/*图片数量*/
		var targeLeft=0;/*标签要的距离*/
		var buttonSpan=$(".pointer")[0].children;/*获取所有span标签*/
		
		
		/*切换页面*/
		$(".left").click(function(){
			nextPage(false);
		});
		$(".right").click(function(){
			nextPage(true);
		});
		function nextPage(next){/*图片的切换，当next-true为true时为下一张，nextPage为false为上一张*/
			if(next){
				if(index==4){
					index=1;
					targeLeft=0;
				}else{
					index++;
					targeLeft=-1240*(index-1);
				}
			}else{
				if(index==1){
					index=4;
					targeLeft=-1240*(imageCount-1);
				}else{
					index--;
					targeLeft=-1240*(index-1);
				}
			}
			/*移动的过程*/
			$(".list").animate({left:targeLeft+"px"},1000);
			$(buttonSpan[$(this).attr("index")-1]).addClass("on");
			$(buttonSpan[$(this).attr("index")-1]).siblings().removeClass("on");
		}
		
		/*自动轮播*/
		setInterval(autoPage,3000);
		function autoPage(){
			nextPage(true);
		}
		
		
		/*不太熟悉*/
		/*点击圆点标签切换图片*/
		clickButton();/*调用方法*/
		function clickButton(){
			for(var i=0;i<buttonSpan.length;i++){
				buttonSpan[i].onclick=function(){
					targeLeft=-1240*($(this).attr("index")-1);/*buttonSpan[i].index*/
					$(".list").animate({left:targeLeft+"px"},1000);
					$(buttonSpan[$(this).attr("index")-1]).addClass("on");
					$(buttonSpan[$(this).attr("index")-1]).siblings().removeClass("on");
				}
			}
		}
		
		/* 点击场地，显示场地介绍 */
		$(".div-icon img").click(function(){
			var index=$(this).index();
			/* $(".about-content").show(); */
			$(".content-Info div").eq(index).show();
			$(".content-Info div").eq(index).siblings().hide();
			$(this).addClass("c1");
			$(this).siblings().removeClass("c1");
		});
	
	</script>
</body>
</html>
